

		<link rel="stylesheet" href="__CSS__uniform.css" />
		<link rel="stylesheet" href="__CSS__select2.css" />
		<link rel="stylesheet" href="__CSS__jquery-ui.min.css" />
			
			<script src="__JS__jquery.min.js"></script>
            <script src="__JS__bootstrap.min.js"></script>
            <script src="__JS__jquery.uniform.js"></script>
            <script src="__JS__select2.min.js"></script>
            <script src="__JS__unicorn.js"></script>
            <script src="__JS__unicorn.tables.js"></script>
			<script src="__JS__jquery-ui.min.js"></script>
				
		
		
		
<div id="content">
	<div id="content-header">
		<h1>管理列表</h1>
		<div class="btn-group">
			<a class="btn btn-large tip-bottom" title="Manage Files"><i class="icon-file"></i></a>
			<a class="btn btn-large tip-bottom" title="Manage Users"><i class="icon-user"></i></a>
			<a class="btn btn-large tip-bottom" title="Manage Comments"><i class="icon-comment"></i><span class="label label-important">5</span></a>
			<a class="btn btn-large tip-bottom" title="Manage Orders"><i class="icon-shopping-cart"></i></a>
		</div>
	</div>
	<div id="breadcrumb">
		<a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i>首页</a>
		<a href="#" class="current">分类列表</a>
	</div>
	<div class="container-fluid">
		<div class="widget-box">
			<div class="widget-title">
				<span class="icon">
					<i class="icon-th"></i>
				</span>
				<h5>分类列表</h5>
			</div>
		<div class="widget-content nopadding">
			<button onclick="addCate();" class="btn btn-danger btn-large">添加分类</button>	
			<table class="table table-bordered data-table">
				<thead>
				<tr>
					<th></th>
					<th>分类ID</th>
					<th>分类名</th>
					<th>上级分类</th>
					<th>操作</th>
				</tr>
				</thead>
				<tbody>
		<!--------- 循环管理员列表-------===- 循环管理员列表-=====--------- 循环管理员列表--------------========------- -->
				<foreach name="cateArray" key="key" item="values">
					<tr class="gradeX">
						<td><input type="checkbox" /></td>
						<td>{$values['id']}</td>
						<td>{$values['cateName']}{$values['name']}</td>
						<td>{$values['pid']}</td>
						<td class="center">
							<button onclick="cateEdit('{$values.id}','{$values.name}','{$values.pid}')" id="edit" class="btn btn-primary"><i class="icon-pencil icon-white"></i> 修改</button>
							<button onclick="catedel({$values['id']});" class="btn btn-danger"><i class="icon-remove icon-white"></i> 删除</button>
						</td>
					</tr>
				</foreach>
				</tbody>
				
				
				
			</table>  
			
			
			
			
			
			
			
			
		
		
		
		
		</div>
	</div>
	</div>
</div>		
		
	
	
	
	
				
	<!-- 隐藏表单域，jq弹出框 -->						
	<form id="dailog"  style="display:none;">
	    <fieldset>
	      <input type="hidden" name="cateid" id="cateid" value=""/>	      
	      <label for="catename">分类名：</label>
	      <input type="text" name="catename" id="catename" value="" class="text ui-widget-content ui-corner-all">
	      <label for="catepid">上级ID</label>
	      <select id="catepid" name="catepid">
	      		<option value="0">顶级分类</option>
	      		<foreach name="cateArray" item="values">
	      			<option value="{$values['id']}">{$values['cateName']}{$values['name']}</option>
	      		</foreach>
	      </select>
	    </fieldset>
	</form>
	<div id="alerts"> </div>








<script type="text/javascript">	

//删除分类信息         
function catedel(cateid){
		$.get("__CONTROLLER__/doaction.html?do=delete",
				{"cateid":cateid},
				function(data){
					alerts("删除成功","分类删除成功");

		});
}

//修改分类  
function cateEdit(cateId,cateName,catepid)
	{
		$("#dailog").attr("title","修改分类");//attr() 方法设置或返回被选元素的属性值。
		$("#cateid").val(cateId);
		$("#catename").val(cateName);
		$("#catepid").val(catepid);
		dailog=$("#dailog").dialog({
		      autoOpen: true,
		      height: 300,
		      width: 350,
		      cateName:'cateName',
		      buttons: {
		        "修改":editCate,
		        "取消": function() {
		         	dailog.dialog("close");
		        },
		      },
		      close: function() {
		        $("#dailog")[0].reset();
		        //allFields.removeClass( "ui-state-error" );
		      }
		  });
	}		
//修改分类信息 并验证信息 写入数据库				
function editCate(){
	cateName=$("#catename").val();
	cateId=$("#cateid").val();
	catepid=$("#catepid").val();
	if(cateName=='')
	{
	  alerts("分类名不能为空","分类名不能为空");
	  return ;
	}
	$.post("__CONTROLLER__/doaction.html?do=update",
		  {"id":cateId,"name":cateName,"pid":catepid},
		  function(data){
			  dailog.dialog( "close");
			  alerts("修改成功","分类添加成功");
		  },
		  "json");
}







//添加分类
function addCate()
{
	$("#dailog")[0].reset();
	$("#dailog").attr("title","添加分类");
	dailog=$("#dailog").dialog({
	      autoOpen: true,
	      height: 300,
	      width: 350,
	      cateName:'cateName',
	      buttons: {
	        "增加":doAddcate,
	        "取消": function() {
	         	dailog.dialog( "close");
	        },
	      },
	      close: function() {
		        $("#dailog")[0].reset();
	        //allFields.removeClass( "ui-state-error" );
	      }
	  });
}
//确认添加分类后 验证信息  写入数据库
function doAddcate(){
	cateName=$("#catename").val();
	catepid=$("#catepid").val();
	if(cateName=='')
		{
		  alerts("分类名不能为空","分类名不能为空");
		  return ;
		}
	$.post("__CONTROLLER__/doaction.html?do=add",
		  {"name":cateName,"pid":catepid},
		  function(data){
			  dailog.dialog( "close");
			  alerts("添加成功","分类添加成功");
		  },
		"json");
}


//确认添加分类后 验证信息有误弹出提示框
function  alerts(title,message){
	$("#alerts").attr("title",title);
	$("#alerts").html("<b style='color:red;'>"+message+"</b>");
	dailog2=$("#alerts").dialog({buttons: {
        "确定": function() {
		 	window.location.reload();
			dailog2.dialog( "close");
        },
      }}); 
}



				
				
				
				
				
</script>			
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
				
